<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:c="http://java.sun.com/jstl/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:ui="http://java.sun.com/jsf/facelets">
	
	<p:dialog id="user_query_component_dialog" widgetVar="user_query_component_var" modal="true"
		header="查询用户列表" resizable="false" width="800">

		<h:form prependId="false" id="user_query_component_form">
			<p:focus context="user_query_component_form"/>
			
			<div class="style1">
				<h:panelGrid columns="6"
					columnClasses="column1,column2,column1,column2,column1,column2">
					<h:outputText value="用户编号：" />
					<p:inputText value="#{userQueryComponent.queryMap['code']}" title="只向右模糊匹配"/>
					<h:outputText value="用户名称：" />
					<p:inputText value="#{userQueryComponent.queryMap['name']}"/>
				</h:panelGrid>
				<div>
					<p:commandButton value="#{msgs.btnQuery}" icon="#{comm.queryClass}"
						action="#{userQueryComponent.search}" update=":user_query_component_form:user_data_table" />
					<p:commandButton value="#{msgs.btnReset}" icon="#{comm.resetClass}"
						type="reset" />
				</div>
			</div>
			
			<p:dataTable id="user_data_table" value="#{userQueryComponent.lazyData}"
				var="data" paginator="true" rows="10" paginatorPosition="bottom"
				paginatorTemplate="{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}"
				currentPageReportTemplate="{currentPage}/{totalPages}" rowKey="#{data.id}"
				selection="#{userQueryComponent.datas}" emptyMessage="#{msgs.emptyResult}">
				<f:facet name="header">用户信息列表</f:facet>

				<p:column selectionMode="multiple" style="text-align: center;" />
				<p:column headerText="编号">#{data.code}</p:column>
				<p:column headerText="名称">#{data.name}</p:column>
				<p:column headerText="性别">#{data.sex}</p:column>
				<p:column headerText="生日">
					#{of:formatDateWithTimezone(data.birth, 'yyyy-MM-dd', 'GMT')}
				</p:column>
				<p:column headerText="移动电话" style="width: 15%;">#{data.mobile}</p:column>
				<p:column headerText="#{msgs.valid}" style="width: 5%;">
					#{data.status == 1 ? msgs.valid_y : msgs.valid_n}
				</p:column>
			</p:dataTable>
			
			<div style="text-align: center;">
				<p:commandButton icon="#{comm.saveClass}" value="#{msgs.btnSave}" action="#{userQueryComponent.callBack}"
					oncomplete="handleUsers(xhr, status, args);" update=":option_info,#{userQueryComponent.updateArea}"
					disabled="#{roleBean.model eq comm.m_q}"/>
				<p:commandButton icon="#{comm.cancelClass}" value="#{msgs.btnCancel}" 
					type="button" onclick="user_query_component_var.hide();"/>
			</div>
		</h:form>
		<script type="text/javascript">
			function handleUsers(xhr, status, args) {
				if(args.option_result == 'success') {
					user_query_component_var.hide();
				}
			}
		</script>
	</p:dialog>

</ui:composition>